<template>
  <div class="container">
    <ul class="list">
      <li v-for="item of list" :key="item.id" class="list__item" shadow="hover">
        <ExchangeItem :item="item" />
      </li>
    </ul>
    <div class="cc-page">
      <el-pagination :total="total"  :page-size="limit" :current="current" @current-change="onPageChange" />
    </div>
  </div>
</template>

<script>
  import ExchangeItem from '@/components/exchange/Item.vue';
  import { dopageList } from '@/apis/exchange';
  export default {
    name: 'ExchangeIndex',
    components: { ExchangeItem },
    data() {
      return {
        url_head: 'http://121.199.12.118:8083',
        total: 0,
        limit: 9,
        current: 1,
        pageNum: 1,
        list: []
      };
    },
    methods: {
      onFilterChange(data) {
        console.log(data);
      },

      async onPageChange(num) {
        this.pageNum = parseInt(num);
        await this.fetchList();
      },

      async fetchList() {
        const res = await dopageList({ pageSize: this.limit, pageNum: this.pageNum });
        this.list = res.data.list;
        this.total = res.data.total;
        console.log(this.total);
        for (const value of this.list) {
          if ((value.pic === undefined) || (value.pic == null)) {
            // console.log(value.pic);
            continue;
          }
          if (value.pic.indexOf('/var/upload') !== -1) {
            value.pic = this.url_head + value.pic;
            // console.log(value.pic);
          }
        }
      }
    },
    mounted() {
      this.fetchList();
    },
    created() {}
  };
</script>

<style lang="scss" type="text/scss" scoped>
$space: 6px;

.list {
  display: flex;
  flex-wrap: wrap;
  padding: $space;
  &__item {
    flex-basis: calc(33.33% - #{$space * 2});
    margin: $space;
  }
}
</style>
